<script setup>
import { computed } from 'vue'

const props = defineProps({
  num: {
    type: [Number, String],
    default: 20,
    validator: (value) => {
      if (typeof value === 'number') {
        return value >= 0 && value <= 100
      }
      if (typeof value === 'string') {
        if (value.includes('%')) {
          const num = parseFloat(value)
          return !isNaN(num) && num >= 0 && num <= 100
        }
        if (value.includes('/')) {
          const [num, den] = value.split('/').map(Number)
          return !isNaN(num) && !isNaN(den) && den !== 0 && (num / den) * 100 <= 100
        }
      }
      return false
    }
  },
  color: {
    type: String,
    default: '#E94242'
  },
  height: {
    type: [Number, String],
    default: 4
  }
})

const progress = computed(() => {
  const val = props.num
  if (typeof val === 'number') {
    return Math.min(100, Math.max(0, val))
  }
  if (typeof val === 'string') {
    if (val.includes('%')) {
      return Math.min(100, Math.max(0, parseFloat(val)))
    }
    if (val.includes('/')) {
      const [num, den] = val.split('/').map(Number)
      return Math.min(100, Math.max(0, (num / den) * 100))
    }
  }
  return 20
})
</script>
<template>
  <div class="progress" :style="{ height: typeof height === 'number' ? `${height}px` : height}">
    <div
        class="progress-bar"
        :style="{
        width: `${progress}%`,
        backgroundColor: color,
        height: typeof height === 'number' ? `${height}px` : height
      }"
    ></div>
  </div>
</template>
<style scoped>
.progress {
  width: 100%;
  background: #ebeef5;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  transition: width 0.6s ease;
}
</style>